import React, { Component } from "react";
import axios from 'axios'
import PubSub from 'pubsub-js'
import { Input, Button } from 'antd';

export default class Search extends Component {

    handleEnter = () => {
        // 获取用户的输入值
        // 结构赋值连续写法 + 重命名
        const {input:{value: keyWord}} = this.keyWordElement
        PubSub.publish('startAxios', {isFirst: false, isLoading: true})
        // 模板语言  后端配置了cors
        axios.get(`https://api.github.com/search/users?q=${keyWord}`).then(
          response => {
            console.log('成功了', response.data)
            PubSub.publish('axios.success', {users: response.data.items, isLoading: false})
          },
          error => {
            console.log('失败了', error)
            PubSub.publish('axios.error', {isLoading: false, err: error.message})
        }
        )
    }

    render() {
        return (
            <div>
               <div>
                   <span>Search Github Users</span>
               </div>
               <div className="search">
                    <Input ref={c => this.keyWordElement = c} onPressEnter={this.handleEnter} placeholder="enter the name you searh"/>
                    <Button onClick={this.handleEnter}>Search</Button>
               </div>
            </div>
        )
    }
}